<template>
	<view>

		<custom title="我的团队" mode="2" fixed="fixed">

		</custom>

		<view style="padding: 20rpx 0rpx;">
			<view class="flex">
				<view class="ml-30 mr-30 flex-1 color-ffffff"
					style="height: 300rpx;border-radius: 10rpx;background: url(../../static/my/team-box.png) left center / 100% auto no-repeat;">
					<view style="height: 300rpx;" class="flex flex-y-center flex-x-center">

						<view class="flex flex-y flex-x-y">
							<view class="fs-26">直推人数</view>
							<view style="font-size:48rpx;margin-top:20rpx;">{{myNum || '0'}}</view>
						</view>
						<view style="height: 74rpx;width: 2rpx;background-color: #FFFFFF;margin:0 100rpx;opacity: 0.6;">
						</view>
						<view class="flex flex-y flex-x-y">
							<view class="fs-26">总人数</view>
							<view style="font-size:48rpx;margin-top:20rpx;">{{teamNum || '0'}}</view>
							<!-- <view class="fs-26">总人数</view>
							<view style="font-size:48rpx;margin-top:20rpx;">{{(Number(teamNum) + Number(myNum)) || '0'}}
							</view> -->
						</view>


					</view>
				</view>

			</view>

			<!-- 列表 -->
			<view style="padding: 0 30rpx;" v-if="list.length>0">
				<view style="padding: 30rpx 20rpx;border-radius: 16rpx;" class="bg-FFFFFF mt-30">

					<view @tap="check_detail(item)" v-if="show_index>index" v-for="(item,index) in list" :key="index"
						style="padding:20rpx 10rpx;">
						<view class="flex flex-y-center flex-x-b color-999999 fs-28">

							<view class="flex-1 over-line1" style="width:33.3%;">
								{{item.name}}
							</view>

							<view style="margin-left: 20rpx;width:33.3%;">
								<view class="over-line1  ">{{item.phone || ''}}</view>
							</view>

							<view class="flex-1 flex flex-x-end flex-y-end" style="line-height: 1;">
								<view class="over-line1 fs-30 color-all">{{item.inviteNum || '0'}}</view>
								<view class="fs-20" style="transform: translateY(-4rpx);margin-left: 8rpx;">人</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<!-- 列表 -->

			<qq-footer :show="is_null" :list="list"></qq-footer>



		</view>



		<!-- <view class="w-688 ml-31">
			<tabs :list="[{name:'全部'},{name:'送出'},{name:'收到'}]" :scroll="true"></tabs>
		</view> -->

		<uni-popup ref="team" type="center">
			<view
				style="width: 600rpx;padding:40rpx 40rpx;border-radius: 20rpx;background-color: #FFFFFF;max-height: 800rpx;overflow-y: auto;">
				<view class="flex flex-x-y fs-30 color-333333 bold mb-20">团队详情</view>
				<view v-for="(item,index) in childList" :key="index" style="padding:15rpx 0rpx;">
					<view class="flex flex-y-center flex-x-b color-999999 fs-28">

						<view class="over-line1">
							{{item.name}}
						</view>

						<view style="margin-left: 20rpx;">
							<view class="over-line1  ">{{item.phone || ''}}</view>
						</view>


					</view>

				</view>
			</view>
		</uni-popup>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_list: [{
						name: '全部',
						id: ''
					},
					{
						name: '待付款',
						id: 2
					},
					{
						name: '待收货',
						id: 3
					},
					{
						name: '已完成',
						id: 4
					},
					{
						name: '已取消',
						id: 1
					}
				],
				tab_index: 0,
				list: [],
				is_null: false,
				page: 1,
				myNum: '0',
				teamNum: '0',
				myNum2: "",
				teamNum2: "",
				background: 'rgba(255,255,255,0)',
				customBar: getApp().globalData.customBar + 'px',
				show_index: 20,
				childList: [],
			};
		},
		onShow() {

		},
		onLoad(e) {

			this.init();
			// setTimeout(() => {
			// 	this.$refs.team.open();
			// }, 200)


		},

		onReachBottom() {
			// this.get_list(this.page);
			this.show_index += 20;
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 200);
			this.init();
		},


		methods: {

			init() {
				this.setData({
					page: 1,
					list: [],
					is_null: false,

				})
				this.get_list();
			},
			get_list(page = 1) {
				this.request({
					url: '/team',
					data: {
						// page: page,
					},
					loading: page == 1,
				}).then(res => {

					if (res.status == 200) {
						let data = res?.data?.userList || [];
						data.forEach(v => {
							v.inviteNum = v.userInfos?.length || 0;
							if (v.userInfos) {
								v.userInfos.forEach(v2 => {
									v2.phone =
										`${v2.phone.substr(0,3)}****${v2.phone.substr(7,4)}`;
								})
							}
						});
						this.list = this.list.concat(data);
						if (res.data && res.data) {
							this.myNum = res.data.myNum;
							this.teamNum = res.data.teamNum;
						}

						if (data.length == 0) {
							this.is_null = true;
						} else {
							this.page++;
						}
					}
				});
			},
			check_detail(item) {
				if (item.userInfos && item.userInfos.length > 0) {
					this.childList = item.userInfos;
					this.$refs.team.open();
				}
			},



		},

	}
</script>